<template>
  <el-table :data="taskList" stripe style="width: 100%">
    <el-table-column prop="id" label="任务ID" width="180" />
    <el-table-column prop="name" label="任务名称" width="180" />
    <el-table-column prop="clazz" label="任务类" />
    <el-table-column prop="cron" label="任务表达式" />
<!--    <el-table-column prop="status" label="任务状态" />-->
    <el-table-column label="状态">
      <template #default="scope">
<!--        status属性，必须是String类型的数据，数字类型不识别-->
        <el-switch
            v-model="scope.row.statusStr"
            inline-prompt
            class="ml-2"
            active-value="1"
            active-text="已开启"
            inactive-value="0"
            inactive-text="已关闭"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            @change="switchHandler(scope.row)"
        />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="success" size="small" @click="start(scope.row)">开始</el-button>
        <el-button type="warning" size="small" @click="stop(scope.row)">停止</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {ref, reactive, onMounted} from "vue";
import axios from '@/plugins/axios.js'
import {ElMessage} from "element-plus";

let taskList = ref([])
//查询任务列表
let query=()=>{
  axios.get("task/list").then(result=>{
    if (result.code === 200){
      taskList.value = result.data;
    }
  })
}
let start= (row)=>{
  let id = row.id;
  axios.get("task/start/"+id).then(result=>{
    ElMessage.success("任务开始成功")
    row.status = 1;
  })
}
let  stop = (row)=>{
  axios.get("task/stop/"+row.id).then(result=>{
    ElMessage.success("任务停止成功")
    row.status = 0;
  })
}
let switchHandler=(row)=>{
  if (row.status == 1){
    stop(row)
  }else if (row.status == 0){
    start(row)
  }
}


onMounted(() => {
  query()
});
</script>

<style scoped>

</style>